<!--  -->
<template>
	<div class="" v-if="subtaskType == subtaskTypeConfig.develop.name">
		<designTask :taskTypeList="taskTypeList" @typeChange="typeChange" />
	</div>
	<div class="" v-if="subtaskType == subtaskTypeConfig.sendGoods.name">
		<sendGoodsTask :taskTypeList="taskTypeList" @typeChange="typeChange" />
	</div>
	<div class="" v-if="subtaskType == subtaskTypeConfig.install.name">
		<designTask :taskTypeList="taskTypeList" @typeChange="typeChange" />
	</div>
	<div class="" v-if="subtaskType == subtaskTypeConfig.procure.name">
		<installTask :taskTypeList="taskTypeList" @typeChange="typeChange" />
	</div>
	<div class="" v-if="subtaskType == subtaskTypeConfig.procure.name">
		<procureTask :taskTypeList="taskTypeList" @typeChange="typeChange" />
	</div>
</template>
<script setup lang="ts">
import { ref, reactive, Fragment } from 'vue';
import { ElMessage } from 'element-plus';
import designTask from './designTask.vue';
import installTask from './installTask.vue';
import sendGoodsTask from './sendGoodsTask.vue';
import procureTask from './procureTask.vue';

const subtaskTypeConfig = {
	develop: {
		name: 'develop',
		title: '研发任务',
	},
	sendGoods: {
		name: 'sendGoods',
		title: '发货任务',
	},
	install: {
		name: 'install',
		title: '安装任务',
	},
	procure: {
		name: 'procure',
		title: '采购任务',
	},
	produce: {
		name: 'produce',
		title: '生产任务',
	},
};
const subtaskType = ref(subtaskTypeConfig.develop.name);

const typeChange = value => {
	subtaskType.value = value;
	ElMessage({
		message: value,
	});
};

const taskTypeList = reactive([
	{ key: 'design', title: '设计研发任务' },
	{ key: 'produce', title: '生产任务' },
	{ key: 'sendGoods', title: '发货任务' },
	{ key: 'install', title: '安装任务' },
	{ key: 'procure', title: '采购任务' },
]);
</script>
<style lang="scss"></style>
